<script setup lang="ts">
import { NCard, NFlex, NImage, NScrollbar, NSpace, NAutoComplete } from "naive-ui";
import { ref } from "vue";
import data from "../examples";

const props = defineProps({

  active: {
    type: Function,
    default: (_data) => { }
  }
});

const dataRef = ref(data);

</script>
<template>
  <NFlex vertical style="height: 100%; margin:10px;">
    <NAutoComplete style="height: 34px;" />
    <NScrollbar style="flex: 1; width: 100%; padding: 5px;margin: 5px -5px;">
      <NFlex wrap="wrap">
        <NCard v-for="item in dataRef" :key="item.key" :title="item.name" size="small"
          style="width: 238px; padding: 4px; flex-direction: column-reverse" @click="active(item)">
          <template #cover>
            <NImage :src="item.img" preview-disabled style="height: 128px; width: 228px;" />
          </template>
        </NCard>
      </NFlex>
    </NScrollbar>
  </NFlex>

</template>
<style scoped lang="scss">
:deep(.n-card-header) {
  padding: 2px 0px;
}

:deep(.n-card-cover) {
  display: flex;
  justify-content: center;
}
</style>
